<template>
  <div class="role">
    <el-row>
        <el-col :span="24">
            <el-breadcrumb separator="/" class="top">
                <el-breadcrumb-item :to="{ path: '/about/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色列表</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 添加角色 -->
          
            <el-button type="primary" size= mini @click="dialogFormVisible = true;">添加角色</el-button>
                <el-dialog title='添加' :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="活动名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述" :label-width="formLabelWidth">
                        <el-input v-model="form.pas" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false;addUser()">确 定</el-button>
                </div>
            </el-dialog>

                <el-table
                    :data="setList"
                    stripe
                    style="width: 100%">
                    <el-table-column
                    width="100">
                    >
                    </el-table-column>
                    <el-table-column
                    width="100">
                    <template slot-scope="scope">{{scope.$index + 1 }} </template>
                    </el-table-column>
                    <el-table-column
                    prop="roleName"
                    label="角色名"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="roleDesc"
                    label="角色描述"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop=""
                    label="操作">
                    <template slot-scope="scope">
                    <el-button type="primary" size= mini @click="dialogVisible = true;redact(scope.$index)">编辑</el-button>
                    <el-button type="danger" size= mini @click="open">删除</el-button>
                    <el-button type="warning" size= mini @click="changeBranch = true">分支配置</el-button>
                    </template>   
                    </el-table-column>
                </el-table>
                <el-dialog
                    title="编辑角色"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                    <el-form :model="form">
                        <el-form-item label="活动名称" :label-width="formLabelWidth">
                            <el-input v-model="input.user" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="角色描述" :label-width="formLabelWidth">
                            <el-input v-model="input.pwd" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>

                <el-dialog
                    title="编辑角色"
                    :visible.sync="changeBranch"
                    width="30%"
                    :before-close="handleClose">
                    <el-tree
                    :data="data"
                    show-checkbox
                    node-key="id"
                    :default-expanded-keys="[2, 3]"
                    :default-checked-keys="[5]"
                    :props="defaultProps">
                    </el-tree>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="changeBranch = false">取 消</el-button>
                        <el-button type="primary" @click="changeBranch = false">确 定</el-button>
                    </span>
                </el-dialog>
        </el-col>
    </el-row>
  </div>
</template>

<script>


export default {
    data(){
        return {
            setList:{},
            dialogFormVisible: false,
            dialogVisible: false,
            changeBranch:false,
            form: {
                name: '',
                pas:'',
                
            },
           input:{
            user:'',
            pwd:''
           },
            formLabelWidth: '120px',
            data: [{
                id: 1,
                label: '商品管理',
                children: [{
                    id: 4,
                    label: '商品列表',
                    children: [{
                    id: 9,
                    label: '添加商品'
                    }, {
                    id: 10,
                    label: '商品修改'
                    }]
                }]
                }, {
                id: 2,
                label: '分类参数',
                children: [{
                    id: 5,
                    label: '获取参数列表'
                }, {
                    id: 6,
                    label: '创建商品列表'
                }]
                }, {
                id: 3,
                label: '商品分类',
                children: [{
                    id: 7,
                    label: '添加分类'
                }, {
                    id: 8,
                    label: '删除分类'
                }],
                id: 4,
                label: '商品管理',
                children: [{
                    id: 5,
                    label: '商品列表',
                    children: [{
                    id: 9,
                    label: '添加商品'
                    }, {
                    id: 10,
                    label: '商品修改'
                    }]
                }]
            }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
        }
    },
    async created(){
        // window.location.reload();
        let res = await this.$http.getRoleList();
        this.setList = res.data.data
    },
        
    methods: {
        //添加
       addUser(){
        this.title="添加商品"
        var data = { roleName:this.form.name,roleDesc:this.form.pas }
        // window.location.reload();
        this.setList.push(data)
        this.form.name = this.form.pas ='' 
        },
        
        //编辑
    
        redact(index) {
            this.input.user = this.setList[index].roleName
            this.input.pwd = this.setList[index].roleDesc
        
        },
        //删除
        open(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            //     var index = this.setList.findIndex(item => {
            //     if(item.id === id) {
            //         return true;
            //     }
            // })
            this.setList.splice(id,1)
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
        });
      },

      //分支配置
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    } 
}
</script>

<style lang="scss" scoped>
    .role {
        margin-left:10px;
       .top {
        margin-bottom:5px;
       }
       .show {
        background:#fff;
        border:1px solid #ccc;
        box-shadow: 2px 2px 5px #000;
        padding:4px 4px 4px 4px;
        .row {
            margin-bottom:5px;
        }
        .table {
            border-collapse: collapse;
            width:100%;
            border:1px solid rgb(236, 20, 20);
            tr {
                height:50px;
                line-height:50px;
                // border:1px solid #ccc;
                th {
                    border:1px solid #ccc;
                  
                }
                td {
                    font-size:14px;
                    color:rgba(102, 102, 102, 0.899);
                    padding:0 20px 0 20px;
                    border:1px solid #ccc;
                }
            }
        }
       }
    }
</style>